<script src="app/controllers/blogs/AddNewBlogspotController.js"></script>

<div class="hfr-loading"
	ng-class="{true:'hfr-showContent', false:''}[showViewContent]"
	ng-controller="AddNewBlogspotController">
	<div class="hfr-contentLoadingBar">
		<div id="dot1" class="loader-dot"></div>
		<div id="dot2" class="loader-dot"></div>
		<div id="dot3" class="loader-dot"></div>
	</div>
	<div class="hfr-loadingStatus">
		<!-- VIEW Create new site blogspot
      ================================================== -->

		<div id="hfr-addNewSite" class="hfr-mw450 hfr-margin-auto">
			<form class="hfr-formAddNewSite" name="blForm">
				<h2 class="hfr-heading">{{'static.dashboard.createBlogger' | translate}}</h2>
				<p>Blog's information</p>
				<div class="form-group">
					<span class="label label-danger hfr-preShow"
						ng-class="{'hfr-show': submitted && blForm.siteurl.$error.required}">{{'message.error.required'
						| translate}}</span> <span class="label label-danger hfr-preShow"
						ng-class="{'hfr-show': submitted && blForm.$error.url}">{{'message.error.url'
						| translate}}</span>
					<div class="input-group">
						<input type="url"
							placeholder="{{'static.addWordpress.websiteUrl' | translate}}"
							class="form-control" name="siteurl" ng-model="siteurl"
							ng-readonly="editForm" required> <span
							class="input-group-addon ti-world"></span>
					</div>
				</div>
				<div class="form-group">
					<span class="label label-danger hfr-preShow"
						ng-class="{'hfr-show': submitted && blForm.bloggerId.$error.required}">{{'message.error.required'
						| translate}}</span>
					<div class="input-group">
						<input type="text"
							placeholder="{{'static.addBlogger.bloggerId' | translate}}"
							class="form-control" name="bloggerId" ng-model="bloggerId"
							ng-readonly="editForm" required> <span
							class="input-group-addon ti-key"></span>
					</div>
				</div>
				<p>Account's information</p>
				<div class="form-group">
					<span class="label label-danger hfr-preShow"
						ng-class="{'hfr-show': submitted && blForm.username.$error.required}">{{'message.error.required'
						| translate}}</span>
					<div class="input-group">
						<input type="email"
							placeholder="{{'static.addBlogger.email' | translate}}"
							class="form-control" name="username" ng-model="username" required>
						<span class="input-group-addon ti-email"></span>
					</div>
				</div>
				<div class="form-group">
					<span class="label label-danger hfr-preShow"
						ng-class="{'hfr-show': submitted && blForm.psswd.$error.required}">{{'message.error.required'
						| translate}}</span>
					<div class="input-group">
						<input type="password"
							placeholder="{{'static.addWordpress.password' | translate}}"
							class="form-control" name="psswd" ng-model="password" ng-enter="check_info(blForm)" required>
						<span class="input-group-addon ti-lock"></span>
					</div>
				</div>
				<br>
				<div class="form-group hfr-inputStyle">
					<input type="checkbox" id="hfr-blogspotDefaultAccount">
					<label for="hfr-blogspotDefaultAccount"><small>{{'blog.link.default_account' | translate }}</small></label>
					<a href="#" class="right"><small><ins>{{ 'blog.link.figure_out' | translate }}</ins></small></a>
				</div>
				<hr>
				<div class="row">
					<div class="col-md-4">
						<a href class="hfr-button-link" back-button> <span
							class="ti-angle-left"></span> {{'static.addWordpress.back' |
							translate}}
						</a>
					</div>
					<div class="col-md-8 content-right">
						<button class="hfr-button-orange hfr-solid" type="button"
							ng-click="check_info(blForm)"
							ng-class="{'hfr-loading': processing == true}"
							ng-disabled="processing" ng-hide="success">
							<span class="hfr-spin ti-reload"></span>{{'static.addWordpress.checkInfomation'
							| translate}}
						</button>
						<button type="button" ng-click="create_site(blForm)"
							class="hfr-button-blue hfr-solid" ng-show="next-step">
							<span class="hfr-spin ti-reload"></span>
							<any ng-if="editForm === false">{{'static.addWordpress.saveAndNext'
							| translate}}</any>
							<any ng-if="editForm">{{'static.addWordpress.update' |
							translate}}</any>
						</button>
					</div>
				</div>
			</form>
		</div>
		<!-- =============== End view =============== -->
	</div>
</div>